<style lang="scss" scoped>
  @import '~vars';
  .chart-auto-height-container {
    position: relative;
    height: 100%;
  }
  .chart-container {
    position: relative;
    height: 300px;
    border: 1px solid;
    margin-bottom: 16px;
    border-radius: $border-radius-base;
  }
  .chart-content {
    height: 264px;
  }
  .chart-title {
    width: 100%;
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: $font-size-base;
  }
  .chart-placeholder {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 270px;
    line-height: 264px;
    text-align: center;
  }
  .chart-container-big {
    height: 600px;
    .chart-content,
    .chart-placeholder {
      height: 564px;
    }
    .chart-placeholder {
      line-height: 564px;
    }
  }
</style>
<template>
  <div class="chart-auto-height-container">
    <div v-if="!isAutoHeight" class="chart-container theme-backgroung-color-white theme-border-color-base" :class="{'chart-container-big': isBig}">
      <div class="chart-title theme-font-color-base theme-background-color-lighten">{{ title }}</div>
      <div class="chart-placeholder theme-background-color-normal-1" v-show="isEmpty && !isLoading">
        <!-- <i class="icon ion-alert-circled theme-font-color-primary"></i> -->
        <span class="theme-font-color-weaken">暂无数据</span>
      </div>
      <div class="chart-content">
        <slot v-show="!isEmpty"></slot>
      </div>
    </div>
    <chart-auto-height-container v-if="isAutoHeight" :title="title" :isLoading="isLoading" :isEmpty="isEmpty">
      <slot v-show="!isEmpty"></slot>
    </chart-auto-height-container>
  </div>
</template>
<script>
import chartAutoHeightContainer from './chart-auto-height-container'

export default {
  components: {chartAutoHeightContainer},
  props: {
    title: {
      default: ''
    },
    isEmpty: {
      default: true
    },
    isBig: {
      default: false
    },
    isLoading: {
      default: false
    },
    isAutoHeight: false
  }
}
</script>
